(function() {
  var globe = planetaryjs.planet();
  // Load our custom `autorotate` plugin; see below.
  globe.loadPlugin(autorotate(10));
  // The `earth` plugin draws the oceans and the land; it's actually
  // a combination of several separate built-in plugins.
  //
  // Note that we're loading a special TopoJSON file
  // (world-110m-withlakes.json) so we can render lakes.
  globe.loadPlugin(planetaryjs.plugins.earth({
    topojson: { file:   'js/world-110m-withlakes.json' },
    oceans:   { fill:   '#1f3170' },
    land:     { fill:   '#636645' },
    borders:  { stroke: '#e4d9d3' }
  }));
  // Load our custom `lakes` plugin to draw lakes; see below.
  globe.loadPlugin(lakes({
    fill: '#000080'
  }));
  // The `pings` plugin draws animated pings on the globe.
  globe.loadPlugin(planetaryjs.plugins.pings());
  // The `zoom` and `drag` plugins enable
  // manipulating the globe with the mouse.
  globe.loadPlugin(planetaryjs.plugins.zoom({
    scaleExtent: [500, 500]
  }));
  globe.loadPlugin(planetaryjs.plugins.drag({
    // Dragging the globe should pause the
    // automatic rotation until we release the mouse.
    onDragStart: function() {
      this.plugins.autorotate.pause();
    },
    onDragEnd: function() {
      this.plugins.autorotate.resume();
    }
  }));
  // Set up the globe's initial scale, offset, and rotation.
  globe.projection.scale(500).translate([600, 500]).rotate([0, -10, 0]);

  // Every few hundred milliseconds, we'll draw another random ping.
  var colors = ['red', 'yellow', 'white', 'orange', 'green', 'cyan', 'pink'];
  var servicePoint =null;




$.ajax({
    			url : '../baseData/getService',
    			type : 'POST', //GET
    			async : true, //或false,是否异步
    			timeout : 5000, //超时时间
    			dataType : 'json', //返回的数据格式：json/xml/html/script/jsonp/text
    			success : function(data, textStatus, jqXHR) {
                     var jsonstr="[{name:data[0].name,lat:data[0].lat,lng:data[0].lon}]";

                        console.log(jsonstr);
					 var jsonarray = eval("("+jsonstr+")");

					//var jsonarray =$.parseJSON( jsonstr );

					console.log(jsonarray);
                      
					for(var i=1;i<data.length;i++){
					
                        var arr={"name":data[i].name,"lat":data[i].lat,"lng":data[i].lon};
						
						  jsonarray.push(arr);

					}
				
        servicePoint=jsonarray;

		console.log(servicePoint);
				}

			});

	
  setInterval(setServicePoint,7000);
  var canvas = document.getElementById('rotatingGlobe');
  // Special code to handle high-density displays (e.g. retina, some phones)
  // In the future, Planetary.js will handle this by itself (or via a plugin).
  if (window.devicePixelRatio == 2) {
    canvas.width = 800;
    canvas.height = 800;
    context = canvas.getContext('2d');
    context.scale(2, 2);
  }
  // Draw that globe!
  globe.draw(canvas);
  
  function setServicePoint()
  {
  	for(var i = 0; i < servicePoint.length; i++)
  	{
  		var lat = servicePoint[i].lat;
    		var lng = servicePoint[i].lng;
    		var name = servicePoint[i].name;
    		var color = colors[Math.floor(Math.random() * colors.length)];
    		globe.plugins.pings.add(lng, lat, { color: color, ttl: 9000, angle: Math.random() * 5,name : name });
  	}
    
  }

  // This plugin will automatically rotate the globe around its vertical
  // axis a configured number of degrees every second.
  function autorotate(degPerSec) {
    // Planetary.js plugins are functions that take a `planet` instance
    // as an argument...
    return function(planet) {
      var lastTick = null;
      var paused = false;
      planet.plugins.autorotate = {
        pause:  function() { paused = true;  },
        resume: function() { paused = false; }
      };
      // ...and configure hooks into certain pieces of its lifecycle.
      planet.onDraw(function() {
        if (paused || !lastTick) {
          lastTick = new Date();
        } else {
          var now = new Date();
          var delta = now - lastTick;
          // This plugin uses the built-in projection (provided by D3)
          // to rotate the globe each time we draw it.
          var rotation = planet.projection.rotate();
          rotation[0] += degPerSec * delta / 1000;
          if (rotation[0] >= 180) rotation[0] -= 360;
          planet.projection.rotate(rotation);
          lastTick = now;
        }
      });
    };
  };

  // This plugin takes lake data from the special
  // TopoJSON we're loading and draws them on the map.
  function lakes(options) {
    options = options || {};
    var lakes = null;

    return function(planet) {
      planet.onInit(function() {
        // We can access the data loaded from the TopoJSON plugin
        // on its namespace on `planet.plugins`. We're loading a custom
        // TopoJSON file with an object called "ne_110m_lakes".
        var world = planet.plugins.topojson.world;
        lakes = topojson.feature(world, world.objects.ne_110m_lakes);
      });

      planet.onDraw(function() {
        planet.withSavedContext(function(context) {
          context.beginPath();
          planet.path.context(context)(lakes);
          context.fillStyle = options.fill || 'black';
          context.fill();
        });
      });
    };
  };
})();